import React from 'react';
import { Button, Input, Table, Modal, message, Spin } from 'antd';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import FILES_TYPE from 'Constants/ShiAnConstants';
import Api from 'Utils/api';
import { formatUtcTime } from 'Utils/index';
import RecordModal from '../Daily/Modal/index';
import CommonBprder from './../../../DispatchPage/Components/CommonBorder';
import './index.scss';

const Search = Input.Search;
const PAGE_SIZE = 8;
const confirm = Modal.confirm;
class VrPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectTab: 1,
      dataCount: 0,
      data: [],
      listPage: 1,
      recordStart: true,
      visible: false,
      isLoading: true,
    };
    this.condition = { offset: 0, limit: PAGE_SIZE };
    this.initList = ::this.initList;
    this.onAdd = ::this.onAdd;
    this.onDetail = ::this.onDetail;
    this.onBtnSearch = ::this.onBtnSearch;
    this.onDelete = ::this.onDelete;
    this.getCarriageInfo = ::this.getCarriageInfo;
  }
  componentDidMount() {
    this.initList();
  }
  onListPageChange(page) {
    this.setState({ listPage: page, isLoading: true }, this.initList.bind(this));
    this.condition.offset = (page - 1) * PAGE_SIZE;
  }
  onAdd(record) {
    if (typeof (record.id) === 'number') {
      if (record.is_released) {
        message.error('上架信息不能支持编辑,请先下架');
      } else {
        this.props.dispatch(routerActions.push(`/system/corule/exhibition/vr/add/${record.id}`));
      }
    } else {
      this.props.dispatch(routerActions.push('/system/corule/exhibition/vr/add'));
    }
  }
  onDetail(id) {
    this.props.dispatch(routerActions.push(`/system/corule/exhibition/vr/detail/${id}`));
  }
  initList() {
    const api = new Api({
      method: 'GET',
      path: `/documents/admin/list/${FILES_TYPE.vr}`,
      query: { ...this.condition },
      success: (json) => {
        this.setState({ isLoading: false, listPage: ((this.condition.offset / PAGE_SIZE) + 1), data: json.data_list, dataCount: json.total_count });
      },
      error: (msg) => {
        this.setState({
          isLoading: false
        });
        message.error(msg);
      }
    });
    api.run();
  }
  onBtnSearch(value) {
    this.condition = Object.assign(this.condition, { title_like: value, offset: 0 });
    this.setState({
      isLoading: true,
    });
    this.initList();
  }
  onDelete(record) {
    const self = this;
    confirm({
      title: '删除VR',
      content: '确定删除该条VR吗？',
      onOk() {
        if (record.is_released) {
          message.error('上架文档不能删除,请先下架');
        } else {
          self.setState({
            isLoading: true,
          });
          const api = new Api({
            method: 'DELETE',
            path: `/documents/admin/${record.id}`,
            success: () => {
              self.initList();
            },
            error: (msg) => {
              message.error(msg);
            }
          });
          api.run();
        }
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  generatorColumns() {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '标题',
        dataIndex: 'title',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '时间',
        dataIndex: 'modify_time',
        render: text => (
          <span >{formatUtcTime(text)}</span >
        )
      },
      {
        title: '操作',
        dataIndex: 'power',
        render: (text, record) => {
          return (
            <span className="operate">
              <span className="underCarriage" style={{ color: '#FFFFFF' }} onClick={this.onUnCarriage.bind(this, record)} >{this.getCarriageInfo(record)}</span >
              <span className="see" onClick={this.onDetail.bind(this, parseInt(record.id, 10))}>查看</span >
              <span className="edit" onClick={this.onAdd.bind(this, record)}>编辑</span >
              <span className="delete" onClick={this.onDelete.bind(this, record)}>删除</span >
            </span>
          );
        }
      }
    ];
  }
  getCarriageInfo(record) {
    if (record.is_released) {
      return '下架';
    }
    return '上架';
  }
  onUnCarriage(record) {
    this.recordModal.show(record);
    if (record.is_released) {
      this.setState({
        recordStart: false,
      });
    } else {
      this.setState({
        recordStart: true,
      });
    }
  }
  onRec() {
    const recordStart = !this.state.recordStart;
    this.setState({
      recordStart: recordStart,
      visible: false,
    });
  }
  render() {
    const columns = this.generatorColumns();
    return (
      <div>
        <CommonBprder
          content={
            <div>
              <div className="display-top-wrap">
                <Search
                  onSearch={(value) => {
                    this.onBtnSearch(value);
                  }}
                  placeholder="查询"
                />
                <Button className="search-btn" onClick={this.onAdd}>
                  <img src="images/page/icon_add.png" alt="" />
                  新增
                </Button>
              </div>
              <Spin size="large" spinning={this.state.isLoading} tip="加载中...">
                <Table
                  rowKey={record => record.id}
                  columns={columns}
                  bordered
                  dataSource={this.state.data}
                  pagination={{
                    pageSize: PAGE_SIZE,
                    total: this.state.dataCount,
                    current: this.state.listPage,
                    onChange: this.onListPageChange.bind(this)
                  }}
                />
              </Spin>
            </div>
          }
        />
        <RecordModal
          ref={(ref) => {
            this.recordModal = ref;
          }}
          title={this.state.recordStart ? '确定要上架' : '确定要下架'}
          message={this.state.recordStart ? '确定要上架么？' : '确定要下架么？'}
          onOk={this.onRec}
          onEdit={this.initList}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}

export default connect(mapStateToProps)(VrPage);

